import { Form, Modal, Row, Col, message, InputNumber, Select } from 'antd';
import { useState } from 'react';

import commonService from '@/api/services/commonService';
import { toYuan } from '@/utils/format-number';

export function CartModal({ showModal, good, onClose }: any) {
  const [form] = Form.useForm();

  const thumbs = JSON.parse(good?.thumbs || '[]');
  const sizes = JSON.parse(good?.sizePrice || '[]');

  const [loading, setLoading] = useState(false);

  const OnCancel = () => {
    onClose();
  };

  const handleFinish = async () => {
    const { num, size } = form.getFieldsValue();
    setLoading(true);
    await commonService.addCartApi({ num, size, fpId: good.id });
    setLoading(false);
    message.success('加入成功');
    onClose();
  };

  return (
    <Modal
      title=""
      open={showModal}
      loading={loading}
      okText="加入购物车"
      cancelText=""
      onCancel={OnCancel}
      onOk={() => handleFinish()}
      centered
    >
      <Form name="login" size="large" form={form}>
        <Row gutter={2}>
          <Col span={11}>
            <img src={thumbs[0]} className="mr-[20px] w-[300]" alt="img" />
          </Col>
          <Col span={2} />
          <Col span={11}>
            <div className="flex flex-col justify-between">
              <div className="flex flex-col">
                <div className="font-weight text-[20px]">{good?.goodsName}</div>
                <div className="my-[20px] text-[30px]">￥{toYuan(good?.price)}</div>
              </div>
              <div>
                <Form.Item label="尺码：" name="size">
                  <Select
                    options={sizes.map((item: any) => {
                      return { label: item.size, value: item.size };
                    })}
                  />
                </Form.Item>
                <Form.Item label="数量" name="num">
                  <InputNumber min={1} />
                </Form.Item>
              </div>
            </div>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}
